<template>
	<view class="ec-view-box">
		<view class="ec-view-box-title flex-bt">
			<view class="flex-cc">
				<image src="../../static/image/home/wave.png" mode="widthFix" style="width: 40rpx" class="ml10" />
				<text style="color: #353535" class="ml10 fw600">雨量站：{{ info.data.name }} {{ info.data.id }}</text>
			</view>
		</view>
		<view style="width: 100%; height: 400rpx" class="mt15">
			<waterEc :options="ecData"></waterEc>
		</view>
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control.js'
	import moment from 'moment'
	export default {
		name: 'ec',
		props: {
			nodeId: {
				type: null,
				default: null
			},
			timeliness: {
				type: null,
				default: null
			}
		},
		components: {
			'block-card': () => import('@/components/home/block-card.vue'),
			waterEc: () => import('@/components/home/waterEc.vue')
		},
		data() {
			return {
				table: [],
				ecData: {},
				info: {
					data: {}
				}
			}
		},
		methods: {
			async init() {
				const resp = await controlApi.getRainTs({
					// SiteNos:[nodeId],
					timeliness: 1, // this.timeliness,
					siteNo: this.nodeId.siteNo
				})
				// const resp = {
				// 	success: true,
				// 	code: 200,
				// 	message: '请求成功',
				// 	data: [
				// 		{
				// 			element: 'R1',
				// 			elementName: '雨量',
				// 			unit: 'mm',
				// 			siteDatas: [
				// 				{
				// 					siteNo: 'F5612',
				// 					siteName: '围头码头',
				// 					elementDatas: [
				// 						{ cTime: '2023-03-30 00:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 01:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 02:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 03:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 04:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 05:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 06:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 07:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 08:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 09:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 10:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 11:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 12:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 13:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 14:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 15:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 16:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 17:00:00', val: 0.0, val2: 0.0 },
				// 						{ cTime: '2023-03-30 18:00:00', val: 0.1, val2: 0.0 },
				// 						{ cTime: '2023-03-30 19:00:00', val: 0.0, val2: 0.0 }
				// 					]
				// 				}
				// 			]
				// 		}
				// 	],
				// 	extras: null,
				// 	timestamp: 1680177724779
				// }
				const { data } = resp

				const elementDatas = data
				this.info.data = {
					name: this.nodeId.siteName,
					id: this.nodeId.siteNo
				}
				const { option } = this.dealDataEv(elementDatas)
				this.ecData = option
			},
			dealDataEv(elementDatas) {
				const ydata = elementDatas.map((item) => {
					return item.value == '-9999' ? '-' : item.value
				})
				const xdata = elementDatas.map((item) => {
					return item.dateHour
				})

				// 图块 和图表数据，最后返回这两个
				let option = {}

				// 处理图表
				option = {
					xAxis: {
						data: xdata,
						axisLabel: {
							show: true,
							showMaxLabel: true,
							textStyle: {
								color: '#A0A0A0'
							},
							formatter: function (value, index) {
								let res = value.split(' ')
								return res.pop()
								// return moment(value).format('HH:mm')
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						// name: "日期",
						axisTick: {
							show: false
						},
						type: 'category',
						nameTextStyle: {
							color: '#A0A0A0'
						}
					},
					yAxis: [
						{
							axisLabel: {
								show: true,
								textStyle: {
									color: '#A0A0A0'
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							name: '雨量(mm)',
							axisTick: {
								show: false
							},
							splitLine: {
								lineStyle: {
									color: '#A0A0A0',
									width: 1
								}
							},
							type: 'value',
							nameTextStyle: {
								color: '#A0A0A0'
							}
						}
					],
					legend: {
						data: ['累计雨量'],
						bottom: '0',
						textStyle: {
							fontSize: 10
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: (params) => {
							var relVal = params[0].name
							for (var i = 0, l = params.length; i < l; i++) {
								let unit = 'mm'
								if (['流量', '出库流量', '入库流量'].includes(params[i].seriesName)) {
									unit = 'm³/s'
								}
								relVal += '<br/>' + params[i].marker + params[i].seriesName + ':' + (params[i].value || '-') + unit
							}
							return relVal
						}
					},
					grid: {
						top: '15%',
						left: '10%',
						bottom: '24%',
						right: '10%'
					},
					series: [
						{
							name: '累计雨量',
							data: ydata,
							symbol: 'none',
							itemStyle: {
								color: '#0085FF',
								lineStyle: {
									width: 2,
									color: '#0085FF'
								}
							},
							type: 'bar',
							smooth: true
						}
					]
				}
				return { option }
			}
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		}
	}
</script>
<style lang="less" scoped>
	.ec-view-box {
		width: 100%;
		height: 100%;
		padding-top: 15rpx;
		.ec-view-box-title {
			width: 691rpx;
			margin: 0 0 15rpx 15rpx;
			height: 58rpx;
			border-radius: 10rpx;
			.btn-more {
				// width: 105rpx;
				height: 40rpx;
				background: #eaf2ff;
				border: 1rpx solid #0085ff;
				border-radius: 39rpx;
				padding: 10rpx 20rpx;
				color: #0085ff;
				font-size: 22rpx;
				font-weight: 600;
			}
		}
	}
</style>
